<template>
    <div style="">
      <div class="content">
        <div class="peopleData">
          <div class="time disp">
            <div>{{peopleData.studyTime/3600 | numFilter}}</div>
            <div>学习时长(小时)</div>
            <div>top{{peopleData.studyTimeRanking}}</div>
            <div class="crown" v-if="peopleData.studyTimeRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>
          <div class="number disp">
            <div>{{peopleData.numberOfAnswers}}</div>
            <div>答题数</div>
            <div>top{{peopleData.numberOfAnswersRanking}}</div>
            <div class="crown" v-if="peopleData.numberOfAnswersRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>
          <div class="frequency disp">
            <div>{{peopleData.examCount}}</div>
            <div>模拟次数</div>
            <div>top{{peopleData.examCountRanking}}</div>
            <div class="crown" v-if="peopleData.examCountRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>
          <div class="rate disp">
            <div>{{peopleData.correctRate*100}}%</div>
            <div>正确率</div>
            <div>top{{peopleData.correctRateRanking}}</div>
            <div class="crown" v-if="peopleData.correctRateRanking<=10">
              <img src="../../assets/images/crown.png" />
            </div>
          </div>
          <div class="ptext">
            个人数据
          </div>
        </div>
      </div>

      <div class="bt">
        <img src="../../assets/images/bt.png" height="20" width="290"/>
      </div>


      <!--排行榜页面-->
      <router-view ></router-view>
    </div>
</template>

<script>
  export default {
    data() {
      return {

        spinShow:false,//加载中
        name:'',
        peopleData:{},//个人数据
      }
    },
    methods: {
      personalData(){
        var id=this.$cookies.get('pcexam_id')
        this.$axios({
          url: 'web/leaderBoard/personal/statistics/'+id,
          method: 'GET',
          data:{},
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function(data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          console.log(response.data);
          this.peopleData=response.data;
          this.spinShow=false;
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('登陆失败！')
          this.spinShow=false;
        });
      },
      esc:function () {//退出
        console.log("退出");
        console.log("个人中心");
        //跳转之前清除下缓存
        this.$router.push({  //核心语句
          path:'/login',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          }
        })
      },
      people:function () {  //点击个人中心
        console.log("个人中心");
        this.$router.push({  //核心语句
          path:'/wholeCenter',   //跳转的路径
          query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          }
        })
      },
    },

    mounted:function() {
//
      if(this.$cookies.get('pcexam_username')==undefined||this.$cookies.get('pcexam_username')=="undefined"||this.$cookies.get('pcexam_username')==""||this.$cookies.get('pcexam_username')==null||this.$cookies.get('pcexam_username')=='null'){
        this.$router.push('/login');
      }else{
        this.name=this.$cookies.get('pcexam_username');
      }
      //渲染个人数据
      this.personalData();

    },
    filters: {
      numFilter (value) {
        // 截取当前数据到小数点后两位
        let realVal = parseFloat(value).toFixed(2);
        return realVal
      }
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


  .peopleData{
    position: relative;
    margin:26px auto;
    width:1080px;
    height:165px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
    border-radius:1px;
    padding: 51px 0 120px 0;
  }
  .peopleData .disp{
    text-align: center;
    display: inline-block;
    width: 265px;
    border-right: 1px  dashed #BDBDBD;
    position: relative;
  }
  .peopleData>div:nth-of-type(4){
    border: none;
  }
  .peopleData>div>div:nth-of-type(1){
    font-size:36px;
    color:rgba(51,51,51,1);
  }
  .peopleData>div>div:nth-of-type(2),.peopleData>div>div:nth-of-type(3){
    font-size: 18px;
    color: #999999;
  }
  .ptext{
    width:80px;
    height:18px;
    font-size:18px;
    color:rgba(51,51,51,1);
    position: absolute;
    top: 22px;
    border-right: none;
    left: 32px;
  }
  .crown{
    width:51px;
    height:45px;
    position: absolute;
    right: 40px;
    top: -35px;
  }
  .crown img{
    width: 100%;
    height: 100%;
  }
  .bt{
    text-align: center;
    height:14px;
    font-size:15px;
    color:rgba(59,80,161,1);
    margin: 32px 0 33px 0;
  }
</style>
